<template>
	<view class="content">
		<view class="nav_header" :style="{ top: navTop }"><view class="nav_title f_5">消息</view></view>
			<!-- 数据列表 -->
			<view class="message_list">
				<block v-if="is_login||userIdentity==1">
				<view class="message_item" @tap="pageTo('/pages/course_to_remind/index')">
					<view class="message_left p-r">
						<image class="message_icon" :src="imgPrefix('/static/image/icon/message_course.png')"></image>
						<text v-if="info.course_reading>0" :class="['p-a','red_dot',info.course_reading>99?'w_35':'']">{{info.course_reading>99?'99+':info.course_reading}}</text>
					</view>
					<view class="message_right">
						<view class="message_title f_5 onelist-hidden">课程提醒</view>
						<text class="message_text onelist-hidden">
							<block v-if="info.course.type==1">{{info.course.time}}有课要上喔，请注意时间安排</block>
							<block v-else-if="info.course.type==2">课程已完成，进入详情页查看吧</block>
							<block v-else-if="info.course.type==3">
								<block v-if="userIdentity==0">{{info.course.time}}已预约成功，请注意时间安排</block>
								<block v-else>已预约课次时间，请进入详情页查看</block></block>
							<block v-else>暂无消息</block>
						</text>
					</view>
				</view>
				<view class="message_item" @tap="pageTo('/pages/system_to_remind/index')">
					<view class="message_left p-r">
						<image class="message_icon" :src="imgPrefix('/static/image/icon/message_sty.png')"></image>
						<text v-if="info.order_reading>0" :class="['p-a','red_dot',info.order_reading>99?'w_35':'']">{{info.order_reading>99?'99+':info.order_reading}}</text>
					</view>
					<view class="message_right">
						<view class="message_title f_5 onelist-hidden">系统提醒</view>
						<text class="message_text onelist-hidden">
							<block v-if="userIdentity==0">
								<block v-if="info.order.type==1">亲的订单尚未支付，超时将自动取消订单喔~</block>
								<block v-else-if="info.order.type==2">亲的订单已成功支付，请进入详情查看上课时间</block>
								<block v-else-if="info.order.type==3">亲的退款申请已通过，进入详情页查看吧</block>
								<block v-else-if="info.order.type==4">亲的退款申请已被拒绝，进入详情页查看吧</block>
								<block v-else-if="info.order.type==5">亲的评价已收到教师回复，进入详情页查看吧</block>
								<block v-else>暂无消息</block>
							</block>
							<block v-else>
								<block v-if="info.order.type==2">您有一个新订单，请进入详情页查看</block>
								<block v-else-if="info.order.type==6">发起订单退款申请，请进入详情页查看</block>
								<block v-else-if="info.order.type==7">订单超时未付款，已自动取消</block>
								<block v-else-if="info.order.type==8">收到一条新评价，快到我的评价中查看吧</block>
								<block v-else>暂无消息</block>
							</block>
						</text>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="no_login">
					<image class="image" :src="imgPrefix('/static/image/default_icon.png')" mode="widthFix"></image>
					<text class="f_24">暂未登录~</text>
					<view class="t-c" @tap="bindLogin()">点击登录</view>
				</view>
			</block>
		</view>
		<authorization @close="closeLoginPopup" @confirm="confirm" :showPopup="authorizationShow"></authorization>
	</view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
const app = getApp();
import { commonMixinFun } from '@/static/mixins/common.js';
import { comPageMixinFun } from '@/static/mixins/comPageCommon.js';
import { getIsIPhoneX } from '@/static/uitls/common.js'; // 机型判断
import API from '@/static/api/index.js';
import { toPage } from '@/static/uitls/common.js';
import authorization from '@/components/authorization/index.vue'; //authorization
export default {
	mixins: [commonMixinFun, comPageMixinFun],
	components: {
		authorization
	},
	data() {
		return {
			authorizationShow:false,
			proportion: 750 / uni.getSystemInfoSync().windowWidth, //将高度乘以换算后的该设备的rpx与px的比例
			navTop: '80px',
			info:{}
		};
	},
	onLoad() {
		getIsIPhoneX().then(isIPhoneX => {
			this.isIPhoneX = isIPhoneX;
		});
	},
	mounted() {
		this.navTop = Number(statusBarHeight + 44) + 'px';
	},
	methods: {
		bindLogin(){
			this.authorizationShow=true
		},
		closeLoginPopup(){
			this.authorizationShow=false
			this.is_login = app.globalData.LOGION;
		},
		confirm(){
			this.closeLoginPopup()
			this.userIdentity = app.globalData.userIdentity;
			app._log('app.globalData.userIdentity',app.globalData.userIdentity)
			this.comShow();
		},
		// 通用方法 star
		comLoad() {
		},
		comShow() {
			this.getMessageList();
		},
		getMessageList(){
			let {userIdentity}=this
			if(this.is_login||userIdentity==1){
				app._log(userIdentity)
				let send = userIdentity==0?API.getMessageList():API.getTMessageList()
				send.then(res=>{
					app._log(res)
					if(res.code==1){
						this.info=res.data
					}else{
						this.showToast(res.msg)
						this.info={}
					}
				}).catch(err=>{
					this.showToast(err.msg)
					this.info={}
				})
			}
		},

		// 置底事件
		comReachBottom() {
			// app._log('消息页面到底了');
			this.setLoadingReverse(); // 设置加载状态的（在mixins里设置）
			setTimeout(() => {
				this.setLoadingReverse();
			}, 1000);
		}
		// 通用方法 end
	}
};
</script>

<style lang="scss">
	.red_dot{
	top: 45rpx;
	right: 5rpx;
	}
/* =============== 头部 satr =============== */

.nav_header {
	width: 750rpx;
	height: 82rpx;
	background-color: #ffffff;
	position: fixed;
	left: 0rpx;
	top: 175rpx;
	box-sizing: border-box;
	// z-index: 5000;
}

.nav_title {
	width: 750rpx;
	line-height: 82rpx;
	background-color: #ffffff;
	font-size: 48rpx;
	color: #252748;
	padding-left: 48rpx;
}

// 消息列表
.message_ {
	&list {
		// margin-top: 100rpx;
		background-color: #fff;
		margin-top:82rpx;
	}
	&item {
		width: 750rpx;
		height: 180rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
		display: flex;
		&:not(:last-child) .message_right {
			border-bottom: 2rpx solid rgba(204, 204, 204, 0.5);
		}
	}
	&left {
		padding: 48rpx 0;
		width: 100%;
		.message_icon {
			width: 84rpx;
			height: 84rpx;
			border-radius: 52rpx 52rpx 16rpx 52rpx;
		}
		// .p-a{
		// 	display: block;
		// 	position: absolute;
		// 	right: 0;
		// 	top: 44rpx;
		// 	width: 18rpx;
		// 	height: 18rpx;
		// 	background-color: #ed4c4c;
		// 	border: solid 2rpx #ffffff;
		// 	border-radius: 50%;
		// 	z-index: 100;
		// }
	}
	&right {
		padding: 48rpx 0;
		margin-left: 24rpx;
	}
	&title {
		font-size: 32rpx;
		width: 528rpx;
		height: 44rpx;
		line-height: 44rpx;
		color: #1f2633;
		margin-bottom: 6rpx;
	}
	&text {
		display: block;
		font-size: 24rpx;
		width: 528rpx;
		line-height: 34rpx;
		color: #999999;
	}
}
.no_login{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.image{
		width: 392rpx;
	}
	.f_24{
		padding: 28rpx 0 40rpx;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #8f8f9a;
		line-height: 40rpx;
		color: #8f8f9a;
	}
	.t-c{
			width: 350rpx;
			line-height: 92rpx;
			color: #fff;
			background-image: linear-gradient(270deg, 
				#7f4aff 0%, 
				#9254ff 100%);
			border-radius: 16rpx;
		}
}
</style>
